<template>
	<div class="wrap">
		<h1 class="title">我的电费信息</h1>
		<div class="info">
			<el-table :data="elecInfo" stripe style="width: 100%" :header-row-style="rowHeaderStyle">
				<el-table-column prop="stuName" label="姓名" width="180" />
				<el-table-column prop="buildNum" label="楼栋" width="180" />
				<el-table-column prop="dorNumber" label="寝室号" />
				<el-table-column prop="money" label="电费余额" />
				<el-table-column prop="updateTime" label="缴费时间" >
					<template #default="{row}">
					{{ new Date(row.updateTime).toLocaleDateString() }}
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script setup>
import { reactive } from 'vue'

import { useUserStore } from '@/stores/userStore'

const { userInfo } = useUserStore()

const elecInfo = reactive([
	{
		stuName: userInfo.stuName,
		buildNum: userInfo.buildId,
		dorNumber: userInfo.dormitory,
		money: userInfo.electric,
		updateTime: userInfo.updateTime,
	},
])

const rowHeaderStyle = () => {
	return { color: 'black', fontSize: '15px' }
}
</script>

<style scoped lang="scss">
.wrap {
  box-shadow: none;

}
.info{
  box-shadow: 0 0 5px 6px #cccc;
}

.title {
	font-size: var(--title-size);
	font-weight: var(--fontweight);
	margin-bottom: 30px;
}
</style>
